<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: common(${sysMenu.name})">
</head>
<!-- Content Header (Page header) -->
<div th:replace="contentHeader"></div>
<!-- Main content -->
<section class="content">
	<div class="row">
		<div class="col-xs-12">
			<div class="box">
				<div class="box-header">
					<h3 class="box-title">条件搜索</h3>
				</div>
				<!-- /.box-header -->
				<!-- form start -->
				<form class="form-inline">
					<div class="box-body">
						<div class="input-group">
							<span class="input-group-addon"> <input type="radio"
								name="rangesType" value="1" checked> 创建时间 <input
								type="radio" name="rangesType" value="2"> 修改时间
							</span><input type="text" id="searchRangesDate" class="form-control"
								placeholder="请选择时间" style="height: 36px;">
						</div>
						<div class="form-group">
							<label>通知类型 </label> <select id="searchType" class="form-control">
							</select>
						</div>
						<div class="form-group">
							<label>对象类型 </label> <select id="searchObjecttype"
								class="form-control">
								<option value="">全部</option>
								<option value="1">单个用户</option>
								<option value="2">多个用户</option>
								<option value="3">所有用户</option>
							</select>
						</div>
						<div class="form-group">
							<label>状态 </label> <select id="searchStatus" class="form-control">
								<option value="">全部</option>
								<option value="1">未发布</option>
								<option value="2">已发布</option>
								<option value="3">已撤销</option>
							</select>
						</div>
						<div class="form-group">
							<label>标题 </label><input type="text" id="searchTitle"
								class="form-control" placeholder="标题">
						</div>
						<div class="form-group">
							<label>内容 </label><input type="text" id="searchContent"
								class="form-control" placeholder="内容">
						</div>
					</div>
					<!-- /.box-body -->
					<div th:replace="boxFooter"></div>
					<!-- /.box-footer -->
				</form>
				<div class="box-body">
					<table id="noticeTable"></table>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->

		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->

	<div id="addNoticeDiv" class="box" style="display: none">
		<!-- form start -->
		<form action="/sys/notice/addNotice">
			<div class="box-body">
				<div class="form-group">
					<label>通知类型 </label> <select id="addType" name="type"
						class="form-control">
					</select>
				</div>
				<div class="form-group">
					<label>对象类型 </label> <select name="objecttype" class="form-control">
						<option value="1">单个用户</option>
						<option value="2">多个用户</option>
						<option value="3">所有用户</option>
					</select>
				</div>
				<div class="form-group">
					<label>标题 </label><input type="text" name="title"
						class="form-control" placeholder="标题">
				</div>
				<div class="form-group">
					<label>内容 </label>
					<textarea id="addContent" name="content"></textarea>
				</div>
			</div>
			<!-- /.box-body -->
			<div class="box-footer">
				<div class="pull-right">
					<button type="submit" class="btn btn-success">
						<i class="fa fa-floppy-o" aria-hidden="true"></i> 保存
					</button>
				</div>
			</div>
			<!-- /.box-footer -->
		</form>
	</div>

	<div id="editNoticeDiv" class="box" style="display: none">
		<!-- form start -->
		<form action="/sys/notice/editNotice">
			<div class="box-body">
				<input type="hidden" id="editId" name="id">
				<div class="form-group">
					<label>通知类型 </label> <select id="editType" name="type"
						class="form-control">
					</select>
				</div>
				<div class="form-group">
					<label>对象类型 </label> <select id="editObjecttype" name="objecttype"
						class="form-control">
						<option value="1">单个用户</option>
						<option value="2">多个用户</option>
						<option value="3">所有用户</option>
					</select>
				</div>
				<div class="form-group">
					<label>标题 </label><input type="text" id="editTitle" name="title"
						class="form-control" placeholder="标题">
				</div>
				<div class="form-group">
					<label>内容 </label>
					<textarea id="editContent" name="content"></textarea>
				</div>
			</div>
			<!-- /.box-body -->
			<div class="box-footer">
				<div class="pull-right">
					<button type="submit" class="btn btn-success">
						<i class="fa fa-floppy-o" aria-hidden="true"></i> 保存
					</button>
				</div>
			</div>
			<!-- /.box-footer -->
		</form>
	</div>

	<div id="detailNoticeDiv" class="box" style="display: none">
		<div class="box-body">
			<div id="detailContent"></div>
		</div>
		<!-- /.box-body -->
	</div>
</section>
<script type="text/javascript">
	var getDictType = function() {
		$.ajax({
			type : 'get',
			url : '/sys/dict/selectList',
			data : {
				pcode : 'notice_type'
			},
			success : function(result) {
				var searchOptions = '<option value="">全部</option>';
				var options = '';
				if (result != null && result.data != null) {
					$.each(result.data, function(index, element) {
						options += '<option value="'+element.code+'">' + element.name + '</option>';
					});
				}
				$('#searchType').empty();
				$('#searchType').append(searchOptions + options);
				$('#addType').empty();
				$('#addType').append(options);
				$('#editType').empty();
				$('#editType').append(options);
			}
		});
	}

	var addCkeditor;
	var initAddCkeditor = function() {
		if (addCkeditor != null) {
			addCkeditor.destroy();
		}
		addCkeditor = CKEDITOR.replace('addContent');
	}

	var editCkeditor;
	var initEditCkeditor = function() {
		if (editCkeditor != null) {
			editCkeditor.destroy();
		}
		editCkeditor = CKEDITOR.replace('editContent');
	}

	var refresh = function() {
		layer.load();
		$('#noticeTable').bootstrapTable('refresh', {
			url : '/sys/notice/selectPage'
		});
	}

	var queryParams = function(params) {
		params.rangesType = $('input:radio[name=rangesType]:checked').val();
		params.rangesDate = $('#searchRangesDate').val();
		params.type = $('#searchType').val();
		params.objecttype = $('#searchObjecttype').val();
		params.status = $('#searchStatus').val();
		params.title = $('#searchTitle').val();
		params.content = $('#searchContent').val();
		return params;
	}

	var bootstrapTable = function() {
		$('#noticeTable').bootstrapTable({
			columns : [ {
				checkbox : true
			}, {
				field : 'typename',
				title : '通知类型',
				width : 100
			}, {
				field : 'objecttype',
				title : '对象类型',
				width : 100,
				sortable : true,
				formatter : function(value, row, index) {
					if (value == 1) {
						return '单个用户';
					} else if (value == 2) {
						return '多个用户';
					} else if (value == 3) {
						return '所有用户';
					}
					return value;
				}
			}, {
				field : 'title',
				title : '标题',
				sortable : true
			}, {
				field : 'status',
				title : '状态',
				width : 100,
				sortable : true,
				formatter : function(value, row, index) {
					if (value == 1) {
						return '未发布';
					} else if (value == 2) {
						return '已发布';
					} else if (value == 3) {
						return '已撤销';
					}
					return value;
				}
			}, {
				field : 'modifytime',
				title : '修改时间',
				width : 200,
				sortable : true
			}, {
				field : 'createtime',
				title : '创建时间',
				width : 200,
				sortable : true
			} ],
			uniqueId : 'id',
			idField : 'id',
			striped : true,
			clickToSelect : true,
			sidePagination : 'server',
			pagination : true,
			queryParamsType : '',
			pageNumber : 1,
			pageSize : 10,
			pageList : [ 10, 50, 250, 500, 1000 ],
			queryParams : queryParams,
			responseHandler : function(result) {
				layer.closeAll();
				result.rows = result.data.records;
				result.total = result.data.total;
				return result;
			},
			onDblClickCell : function(field, value, row, $element) {
				layer.open({
					type : 1,
					title : row.title,
					content : $('#detailNoticeDiv'),
					success : function(layero, index) {
						$('#detailContent').html(row.content);
					}
				});
			}
		});
	}

	$(function() {
		$('input').iCheck({
			checkboxClass : 'icheckbox_square-blue',
			radioClass : 'iradio_square-blue',
			increaseArea : '20%' /* optional */
		});

		var locale = {
			format : 'YYYY-MM-DD',
			separator : ' ~ ',
			applyLabel : '确定',
			cancelLabel : '取消',
			customRangeLabel : '自定义',
			daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
			monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ]
		};

		var ranges = {
			'今日' : [ moment(), moment() ],
			'昨日' : [ moment().subtract(1, 'days'), moment().subtract(1, 'days') ],
			'最近7日' : [ moment().subtract(6, 'days'), moment() ],
			'最近30日' : [ moment().subtract(29, 'days'), moment() ],
			'本月' : [ moment().startOf('month'), moment().endOf('month') ],
			'上月' : [ moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month') ]
		};

		$('#searchRangesDate').daterangepicker({
			locale : locale,
			ranges : ranges,
			startDate : moment().startOf('month'),
			endDate : moment().endOf('month')
		});

		getDictType();

		bootstrapTable();

		$('#notice_search').on('click', function() {
			refresh();
		});

		$('#notice_add').on('click', function() {
			var id = 'addNoticeDiv';
			layer.open({
				type : 1,
				title : $(this).html(),
				content : $('#' + id),
				success : function(layero, index) {
					initAddCkeditor();
				},
				cancel : function() {
					//右上角关闭回调
					empty(id);
					//return false 开启该代码可禁止点击该按钮关闭
				}
			});
		});

		$('#addNoticeDiv form').bootstrapValidator({
			message : '这个值是无效的',
			feedbackIcons : {
				valid : 'fa fa-check',
				invalid : 'fa fa-remove',
				validating : 'fa fa-refresh'
			},
			fields : {
				type : {
					validators : {
						notEmpty : {}
					}
				},
				objecttype : {
					validators : {
						notEmpty : {}
					}
				},
				text : {
					validators : {
						notEmpty : {}
					}
				}
			}
		}).on('success.form.bv', function(e) {
			// Prevent form submission
			e.preventDefault();

			// Get the form instance
			var $form = $(e.target);

			// Get the BootstrapValidator instance
			var bv = $form.data('bootstrapValidator');

			layer.confirm('确定保存？', {
				icon : 3,
				title : '提示'
			}, function(index) {
				// Use Ajax to submit form data
				$.post($form.attr('action'), $form.serialize(), function(result) {
					if (result.success) {
						layer.msg(result.msg, {
							icon : 6
						});
						empty('addNoticeDiv');
						refresh();
					} else {
						layer.msg(result.errorMsg, {
							icon : 5
						});
					}
				}, 'json');
			});
		});

		$('#notice_edit').on('click', function() {
			var selections = $('#noticeTable').bootstrapTable('getSelections');
			if (selections == null || selections.length == 0) {
				layer.msg('请选择一项纪录', {
					icon : 5
				});
				return;
			}
			if (selections.length > 1) {
				layer.msg('只能选择一项纪录', {
					icon : 5
				});
				return;
			}
			if (selections[0].status != 1) {
				layer.msg('只能修改状态为未发布的', {
					icon : 5
				});
				return;
			}
			var id = 'editNoticeDiv';
			layer.open({
				type : 1,
				title : $(this).html(),
				content : $('#' + id),
				success : function(layero, index) {
					initEditCkeditor();
					$('#editId').val(selections[0].id);
					$('#editType').val(selections[0].type);
					$('#editObjecttype').val(selections[0].objecttype);
					$('#editTitle').val(selections[0].title);
					$('#editContent').val(selections[0].content);
				},
				cancel : function() {
					//右上角关闭回调
					empty(id);
					//return false 开启该代码可禁止点击该按钮关闭
				}
			});
		});

		$('#editNoticeDiv form').bootstrapValidator({
			message : '这个值是无效的',
			feedbackIcons : {
				valid : 'fa fa-check',
				invalid : 'fa fa-remove',
				validating : 'fa fa-refresh'
			},
			fields : {
				type : {
					validators : {
						notEmpty : {}
					}
				},
				objecttype : {
					validators : {
						notEmpty : {}
					}
				},
				text : {
					validators : {
						notEmpty : {}
					}
				}
			}
		}).on('success.form.bv', function(e) {
			// Prevent form submission
			e.preventDefault();

			// Get the form instance
			var $form = $(e.target);

			// Get the BootstrapValidator instance
			var bv = $form.data('bootstrapValidator');

			layer.confirm('确定保存？', {
				icon : 3,
				title : '提示'
			}, function(index) {
				// Use Ajax to submit form data
				$.post($form.attr('action'), $form.serialize(), function(result) {
					if (result.success) {
						layer.msg(result.msg, {
							icon : 6
						});
						empty('editNoticeDiv');
						refresh();
					} else {
						layer.msg(result.errorMsg, {
							icon : 5
						});
					}
				}, 'json');
			});
		});

		$('#notice_delete').on('click', function() {
			var selections = $('#noticeTable').bootstrapTable('getSelections');
			if (selections == null || selections.length == 0) {
				layer.msg('请选择一项纪录', {
					icon : 5
				});
				return;
			}
			var ids = new Array();
			$.each(selections, function(index, element) {
				ids.push(element.id);
			});
			layer.confirm('确定删除？', {
				icon : 3,
				title : '提示'
			}, function(index) {
				$.ajax({
					type : 'post',
					url : '/sys/notice/deleteNotice',
					data : {
						ids : ids.join(',')
					},
					success : function(result) {
						if (result.success) {
							layer.msg(result.msg, {
								icon : 6
							});
							refresh();
						} else {
							layer.msg(result.errorMsg, {
								icon : 5
							});
						}
					}
				});
			});
		});

		$('#notice_repeal').on('click', function() {
			var selections = $('#noticeTable').bootstrapTable('getSelections');
			if (selections == null || selections.length == 0) {
				layer.msg('请选择一项纪录', {
					icon : 5
				});
				return;
			}
			var ids = new Array();
			$.each(selections, function(index, element) {
				ids.push(element.id);
			});
			layer.confirm('确定撤销？', {
				icon : 3,
				title : '提示'
			}, function(index) {
				$.ajax({
					type : 'post',
					url : '/sys/notice/repealNotice',
					data : {
						ids : ids.join(',')
					},
					success : function(result) {
						if (result.success) {
							layer.msg(result.msg, {
								icon : 6
							});
							refresh();
						} else {
							layer.msg(result.errorMsg, {
								icon : 5
							});
						}
					}
				});
			});
		});

		$('#notice_release').on('click', function() {
			var selections = $('#noticeTable').bootstrapTable('getSelections');
			if (selections == null || selections.length == 0) {
				layer.msg('请选择一项纪录', {
					icon : 5
				});
				return;
			}
			if (selections.length > 1) {
				layer.msg('只能选择一项纪录', {
					icon : 5
				});
				return;
			}
			if (selections[0].status != 1) {
				layer.msg('只能发布状态为未发布的', {
					icon : 5
				});
				return;
			}
			var singleSelect = true;
			var objecttype = selections[0].objecttype;
			var id = selections[0].id;
			if (objecttype == 3) {
				layer.confirm('确定发布给所有用户？', {
					icon : 3,
					title : '提示'
				}, function(index) {
					$.ajax({
						type : 'post',
						url : '/sys/notice/releaseNotice',
						data : {
							id : id
						},
						success : function(result) {
							if (result.success) {
								layer.msg(result.msg, {
									icon : 6
								});
								refresh();
							} else {
								layer.msg(result.errorMsg, {
									icon : 5
								});
							}
						}
					});
				});
				return;
			} else if (objecttype == 2) {
				singleSelect = false;
			}
			layer.open({
				type : 2,
				title : $(this).html(),
				area : [ 'auto', '540px' ],
				content : '/sys/user/selectUserList?noticeid=' + id + '&singleSelect=' + singleSelect
			});
		});
	});
</script>
</html>